<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
  <h:head>
    <title>Facelet Title</title>
  </h:head>
  <h:body>
    <ui:composition xmlns="http://www.w3.org/1999/xhtml"
                    xmlns:h="http://java.sun.com/jsf/html"
                    xmlns:f="http://java.sun.com/jsf/core"
                    xmlns:c="http://java.sun.com/jsp/jstl/core"
                    xmlns:ace="http://www.icefaces.org/icefaces/components"
                    xmlns:icecore="http://www.icefaces.org/icefaces/core"
                    xmlns:ui="http://java.sun.com/jsf/facelets"
                    template="layout.xhtml">
      <ui:define name="title">Look for singles near you / Awesome Dates</ui:define>
      <ui:define name="content">

        <h:form rendered="#{!userListManager.isData}" id="searchBoxForm" >
          <ace:panel class="searchBox" header="I'm looking for...">
            <h:selectOneRadio value="#{userListManager.sexSearch}">
              <f:selectItem itemValue="Male" itemLabel="Male" />
              <f:selectItem itemValue="Female" itemLabel="Female" />
            </h:selectOneRadio>
            <ace:textEntry label="Username" labelPosition="left" value="#{userListManager.usernameSearch}"/>
            <ace:textEntry label="City" labelPosition="left" value="#{userListManager.citySearch}"  /><br/><br/>

            <h:selectOneMenu value="#{userListManager.ageSearch}">
              <f:selectItem itemValue="select" itemLabel="-Age-"/>
              <f:selectItems  value="#{userListManager.lstSelect}" var="i" itemValue="#{i}" itemLabel="#{i}-#{i+6}"/>
            </h:selectOneMenu>
            <h:commandButton value="Search" action="#{userListManager.search()}" style="margin-left: 5%"/>
          </ace:panel>
        </h:form>
        <h:form rendered="#{!userListManager.isData}">
          <ace:messages globalOnly="true"/>
          <c:forEach items="#{userListManager.lstUsers}" var="c">
            <ace:panel class="userCard" rendered="#{!userManager.user.username.equals(c.username)}" >
              <div class="profileImgContainer">
                <h:graphicImage class="profilePic" value="images/userPictures/#{c.username}/#{c.profilePicture}" />
              </div><br/>
              <h:commandLink value="#{c.username}" action="#{userListManager.lookToProfile(c.userID, c.username)}" 
                             onclick="var interval = setInterval(function () {
                                   var elem = document.getElementById('formTest:profilePanel');
                                   if (elem !== null) {
                                     elem.style.display = 'block';
                                     clearInterval(interval);
                                   }
                                 }, 50)">
              </h:commandLink><br/>
              <h:outputText value="Age: #{c.age}"/><br/>
              <h:outputText value="City: #{c.city}"/><br/>
              <h:outputText value="Likes: #{c.lookingForSex}"/><br/>
              <h:commandButton value="Add to favorite"  rendered="#{userManager.user.isPrivileged}" 
                               action="#{watchListManager.getWatchedListForInsert(userManager.user.userID, c.userID, c.email, c.isWarnedAddWatchList, userManager.user.username)}"/> 
            </ace:panel>
          </c:forEach>
        </h:form>





        <h:form rendered="#{userListManager.isData}" id="formTest">
          <ace:panel id="profilePanel" header="#{userProfileManager.user.username}" style="width: 500px" closable="true" closeSpeed="100">   
            <ace:ajax event="close" listener="#{userListManager.close}" render="@all" execute="@all" />
            <div>
              <div class="profileImgContainer">
                <h:graphicImage class="profilePic" 
                                value="images/userPictures/#{userProfileManager.user.username}/#{userProfileManager.user.profilePicture}" alt="No Picture found"></h:graphicImage>
              </div>
              <div class="userInfos">
                <span>Sex: #{userProfileManager.user.sex}</span><br/>
                <span>Looking for: #{userProfileManager.user.lookingForSex}</span><br/>
                <span>Age: #{userProfileManager.user.age}</span>
                <span>Height: #{userProfileManager.user.height} cm</span><br/>
                <span>City: #{userProfileManager.user.city}</span><br/>
              </div>
            </div>
            <h:form rendered="#{userManager.user.isPrivileged and !userManager.user.username.equals(userProfileManager.user.username)}">
              <h:inputHidden value="#{userProfileManager.sendToUsername}"/>
              <h:inputHidden value="#{userProfileManager.sendToUserId}"/>
              <h:commandButton value="Send a message" action="#{userProfileManager.sendMessage(userProfileManager.user.username)}"/>
              <h:commandButton value="Send a wink" onclick="alert('You just sent a wink to #{userProfileManager.user.username}!');" 
                               action="#{userProfileManager.sendWink(userProfileManager.user.username)}"/>
            </h:form>
            <ace:panel header="Goal">
              #{userProfileManager.user.goal}
            </ace:panel>
            <ace:panel header="Resume">
              #{userProfileManager.user.resume}
            </ace:panel>
            <ace:panel header="Appearance">
              #{userProfileManager.user.apparence}
            </ace:panel>
            <ace:panel header="Pictures">
              <ui:repeat value="#{userProfileManager.user.pictures}" var="p">
                <div class="profileImgContainer">
                  <h:graphicImage class="profilePic" 
                                  value="images/userPictures/#{userProfileManager.user.username}/#{p}" alt="User picture"></h:graphicImage>
                </div>
              </ui:repeat>
            </ace:panel>
          </ace:panel>
        </h:form>
      </ui:define>
    </ui:composition>
  </h:body>
</html>

